<template>
  <view class="scan flex-center" @click="scanCode">
    <view>扫码</view>
    <view class="sectionview" v-if="scanshow == true" @click.stop="scanshowtab">
      <view
        class="qr-reader"
        id="qr-reader"
        style="width: 100%; height: 100%"
      ></view>
    </view>
  </view>
</template>

<script setup>
// // #ifdef H5
// import { Html5Qrcode } from 'html5-qrcode';
// // #endif

// const cameraId = ref('');
// const scanshow = ref(false);
// const scantext = ref('');
// const html5QrCode = ref();

// function scanCode() {
// 	// #ifdef APP-PLUS
// 	uni.scanCode({
// 		success: function (res) {
// 			// that.$emit('change', res.result);
// 		}
// 	});
// 	// #endif
// 	// #ifdef H5
// 	// 增加判断是否在微信
// 	getCameras();
// 	// #endif
// }
// function scanshowtab() {
// 	scanshow.value = false;
// 	stop();
// }
// function getCameras() {
// 	nextTick(() => {
// 		if (scanshow.value) return;
// 		scanshow.value = true;
// 		Html5Qrcode.getCameras()
// 			.then((devices) => {
// 				/**
// 				 * devices would be an array of objects of type:
// 				 * { id: "id", label: "label" }
// 				 */
// 				if (devices && devices.length) {
// 					if (devices.length > 1) {
// 						cameraId.value = devices[1].id;
// 					} else {
// 						cameraId.value = devices[0].id;
// 					}
// 					start();
// 				}
// 			})
// 			.catch((err) => {
// 				alert(err);
// 				// uni.$showMsg(err)
// 				scanshow.value = false;
// 			});
// 	});
// }
// function stop() {
// 	scanshow.value = false;
// 	html5QrCode.value
// 		.stop()
// 		.then((ignore) => {
// 			// QR Code scanning is stopped.
// 			console.log('QR Code scanning stopped.');
// 		})
// 		.catch((err) => {
// 			// Stop failed, handle it.
// 			console.log('Unable to stop scanning.');
// 		});
// }
// function start() {
// 	html5QrCode.value = new Html5Qrcode('qr-reader');
// 	html5QrCode.value
// 		.start(
// 			// cameraId.value, // retreived in the previous step.
// 			{
// 				facingMode: 'environment'
// 			},
// 			{
// 				fps: 10, // sets the framerate to 10 frame per second
// 				qrbox: 250 // sets only 250 X 250 region of viewfinder to
// 				// scannable, rest shaded.
// 			},
// 			(qrCodeMessage) => {
// 				scantext.value = qrCodeMessage;
// 				// do something when code is read. For example:
// 				if (qrCodeMessage) {
// 					// uni.$showMsg(qrCodeMessage)
// 					// uni.$showMsg(qrCodeMessage, 999)
// 					// this.$refs.uToast.show({
// 					// 	title: `扫码成功`,
// 					// 	type: 'success'
// 					// });
// 					alert('扫码成功' + qrCodeMessage);
// 					// this.$emit('change', qrCodeMessage);
// 					stop();
// 				}
// 			},
// 			(errorMessage) => {
// 				// uni.$showMsg('errorMessage' + errorMessage)
// 				// parse error, ideally ignore it. For example:
// 				// console.log(`QR Code no longer in front of camera.`);
// 			}
// 		)
// 		.catch((err) => {
// 			// Start failed, handle it. For example,
// 			console.log(`Unable to start scanning, error: ${err}`);
// 			// this.$refs.uToast.show({
// 			// 	title: `扫码失败：${err}`,
// 			// 	type: 'error'
// 			// });

// 			// uni.$showMsg(err)
// 			alert(err);
// 		});
// }
</script>

<style lang="scss">
.scan {
  width: 56rpx;
  height: 56rpx;
  border-radius: 16rpx;
  background: rgba(255, 255, 255, 0.04);

  .img {
    width: 30rpx;
    height: 30rpx;
  }
}

.sectionview {
  position: fixed;
  top: 0;
  left: 0rpx;
  width: 100%;
  height: 100vh;
  background-color: green;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99;
}

.qr-reader {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0rpx;
}
</style>
